<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>侧边工具条</title>
	<link rel="stylesheet" href="css/style.css">
	<style>
		body {
			/*background: #efefef;*/
		}

		.content {
			height: 10000px;
		}

		ul {
			position: fixed;
			padding: 0;
			margin: 0;
			bottom: 10px;
			right: 20px;
			list-style: none;
		}

		ul li {
			position: relative;
			height: 80px;
			width: 80px;
			background: #eee;
			border-bottom: 1px solid #fff;
			/*border-bottom: none;*/
			overflow: hidden;
			text-align: center;
		}

		ul li:last-child {
			/*border-bottom: 1px solid #235;*/
		}

		ul li span {
			display: block;
			width: 100%;
			height: 80px;
			position: absolute;
			top: 0;
			left: 0;
			transition: all 1s;
		}

		ul li span.info {
			left: 0;
			top: 80px;
		}

		ul li span.img {
			font-size: 80px;
			color: #ddd;
		}

		a:hover span.img {
			top: -80px;
		}

		a:hover span.info {
			top: 0px;
		}
	</style>
</head>
<body>
	<div class="content"></div>


	<ul>
		<li>
			<a href="#">
				<span class="img icon-home"></span>
				<span class="info">
					联系我们asdfasdfasdfasdfasdf
				</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="img  icon-mobile2"></span>
				<span class="info">
					联系我们
				</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="img icon-keyboard"></span>
				<span class="info">
					联系我们
				</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class=" img icon-lifebuoy"></span>
				<span class="info">
					联系我们
				</span>
			</a>
		</li>
	</ul>
</body>
</html>